<!DOCTYPE html>
<html>
	<head>
		<meta charset="utf-8">
		<title>计算器</title>
		<style>
			button {
				width: 80px;
				height: 60px;
			}

			input {
				width: 243px;
				height: 60px;
			}
		</style>
	</head>
	<body>

		<input type="text" id="display"><!-- 显示屏幕 -->
		<td><button onclick="backspace()">←</button></td>
		<table>
			<tr>
				<!-- appendToDisplay将用户点击的按钮上的数字或操作符添加到计算器显示屏幕上 -->
				<td><button onclick="clearDisplay()">C</button></td>
				<td><button onclick="appendToDisplay('(')">(</button></td>
				<td><button onclick="appendToDisplay(')')">)</button></td>
				<td><button onclick="appendToDisplay('%')">%</button></td>

			</tr>
			<tr>
				<td><button onclick="appendToDisplay('7')">7</button></td>
				<td><button onclick="appendToDisplay('8')">8</button></td>
				<td><button onclick="appendToDisplay('9')">9</button></td>
				<td><button onclick="appendToDisplay('+')">+</button></td>

			</tr>
			<tr>
				<td><button onclick="appendToDisplay('4')">4</button></td>
				<td><button onclick="appendToDisplay('5')">5</button></td>
				<td><button onclick="appendToDisplay('6')">6</button></td>
				<td><button onclick="appendToDisplay('-')">-</button></td>

			</tr>
			<tr>
				<td><button onclick="appendToDisplay('1')">1</button></td>
				<td><button onclick="appendToDisplay('2')">2</button></td>
				<td><button onclick="appendToDisplay('3')">3</button></td>
				<td><button onclick="appendToDisplay('*')">*</button></td>

			</tr>
			<tr>
				<td><button onclick="appendToDisplay('0')">0</button></td>
				<td><button onclick="appendToDisplay('.')">.</button></td>
				<td><button onclick="equals()">=</button></td>
				<td><button onclick="appendToDisplay('/')">/</button></td>

			</tr>

		</table>
		<script>
			var display = document.getElementById('display'); // 获取文本框元素
			function appendToDisplay(value) {
				display.value += value; // 将点击的按键添加到文本框中
			}

			function clearDisplay() {
				display.value = '';
			}

			function backspace() {
				display.value = display.value.slice(0, -1) //slice() 方法并指定起始和终止位置，我们可以将字符串的最后一个字符从中删除
			}

			function equals() {
				try {
					
					
					var result = eval(display.value.replace(/(\d+\.\d+)\+(\d+\.\d+)/g, function(match, p1, p2) {
						return (parseFloat((p1 * 10 + p2 * 10) / 10)).toFixed(1); // 解决0.1+0.2！=0.3的问题
					}));
				
					
					if (!isFinite(result)) { // 判断结果是否为有限数
						display.value = "ERROR";
					} else {
						display.value = result;
					}
				} catch (error) { // 捕捉并处理异常
					display.value = "ERROR";
				}
			}
		</script>
	</body>
</html>
